<template>
	<div class="block">
		<div class="list">
			<div
				class="item"
				v-for="item in list"
				:key="item.name"
				@click="onClick(item)"
			>
				<p>
					<span>{{ item.value }}</span>
					<span>{{ item.unit }}</span>
				</p>
				<p>{{ item.name }}</p>
			</div>
		</div>

		<component
			:is="pieChart"
			:chartData="chartOptions"
			unit="%"
		/>
	</div>
</template>

<script setup>
import { ref, computed, onMounted, defineProps, defineEmits } from 'vue'
import { zctj_check, zcyhtj_check, zcpie_check } from '@/service/village'
import pieChart from './pieChart'

const props = defineProps({
	date: {
		type: Object,
		default: () => []
	}
})
const emits = defineEmits(['toPage'])

const list = ref([
	{
		name: '房屋总数量',
		value: 0,
		res: 'zcount',
		unit: '栋'
	},
	{
		name: '已检查数量',
		value: 0,
		res: 'zccount',
		unit: '栋'
	},
	{
		name: '未检查数量',
		value: 0,
		res: 'wzccount',
		unit: '栋'
	},
	{
		name: '检查率',
		value: 0,
		res: 'value',
		unit: '%'
	},
	{
		name: '发现隐患数量',
		value: 0,
		res: 'yhcount',
		unit: '个'
	},
	{
		name: '隐患发现率',
		value: 0,
		res: 'yhfxl',
		unit: '%'
	},
	{
		name: '隐患整改数量',
		value: 0,
		res: 'zgcount',
		unit: '个'
	},
	{
		name: '隐患整改率',
		value: 0,
		res: 'yhzgl',
		unit: '%'
	},
])

const chartData = ref([
	{ name: '已自查', value: 0 },
	{ name: '未自查', value: 0 },
])

const chartOptions = computed(() => {
	return chartData.value
})

const getData = async () => {
	const resultZc = await zctj_check({
		date: props.date
	})
	const resultYh = await zcyhtj_check({
		date: props.date
	})
	const result = {data:{...resultZc.data, ...resultYh.data}}
	Object.keys(result?.data)?.forEach(key => {
		list.value?.map(item => {
			if (item.res === key) item.value = result?.data?.[key]
		})
	})
}

const onClick = record => {
	if (record?.res === 'wzccount') {
		emits('toPage', {
			userCode: true,
			type: 5
		})
	}
}

const getPie = async () => {
	const result = await zcpie_check({
		date: props.date
	})
	chartData.value = result?.data
}

onMounted(() => {
	getData()
	getPie()
})
</script>

<style scoped lang="less">
.block {
	.list {
		margin: 24px 24px 0;
		display: flex;
		gap: 7px;
		flex-wrap: wrap;
		justify-content:space-evenly;
		.item {
			background: #F6F6F6;
			// flex: 1;
			height: 98px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 158px;
			p {
				height: 40px;
				line-height: 40px;
				font-size: 24px;
				&:nth-of-type(1) {
					span {
						&:nth-of-type(1) {
							font-size: 34px;
							font-weight: 600;
							color: var(--van-primary-color);
							margin-right: 6px;
						}
					}
				}
				&:nth-of-type(2) {
					color: #B9B9B9;
				}
			}
		}
	}
}
:deep(.pie-chart) {
	height: 320px;
}
</style>
